<template>
  <div id="main">
    <div>
      <carousel :dataList="dalaList"></carousel>
    </div>
    <p style="font-size: 20px">推荐歌单 ></p>
    <span class="cradSong">
      <div v-for="item in dailyList" :key="item.id">
      <card :src="item.picUrl" :description='item.name'
            @click="$router.push( {path: '/detail' ,query: {id:item.id}})"></card>
      </div>
    </span>
    <sight></sight>
    <div class="ccccc">
    </div>
  </div>
</template>


<script>
export default {
  name: 'pagesFrist'
}
</script>
<script setup>

import Carousel from "~/components/carousel.vue"
import card from "~/components/card.vue"
import {ref} from "vue";
import {getbannerListAPI, get_daily_recommendation_API} from "~/commonApi/api/index.js";
import sight from "~/components/sight.vue"

const dalaList = ref([])
//获取banner图
const getdata = async () => {
  const res = await getbannerListAPI()
  dalaList.value = res.banners
}
getdata()
//获取每日推荐
const dailyList = ref([])
const Getdaily = async () => {
  const res = await get_daily_recommendation_API()
  dailyList.value = res.result
}


Getdaily()
</script>

<style scoped>
.cradSong {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(5, 20%);

}

.ccccc {
  height: 230px;
}
</style>